<template>
	<view class="deliverSet">
		<navBar isBack backColor="#333" title="确认发货" color="#333" background="#fff"></navBar>
		<view class="content">
			<!-- 收货人信息 -->
			<view class="userInfo">
				<image :src="`${baseImg}/static/adminShop/get.png`" mode=""></image>
				<view class="info">
					{{order_info.name}}<span>{{order_info.mobile}}</span>
				</view>
				<view class="selectAddress">
					<input type="text" v-model="allArea" disabled placeholder="请选择地区" />
					<image :src="`${baseImg}/static/adminShop/moremore.png`" mode=""></image>
				</view>
				<view class="selectAddress">
					<input type="text" value="" disabled v-model="order_info.address" placeholder="请输入详细地址" />
					<image :src="`${baseImg}/static/adminShop/map.png`" mode=""></image>
				</view>
			</view>

			<!-- 快递公司 -->
			<view class="selectExpress">
				<view class="selectAddress" @click="selectExpress" v-if="mode!=3">
					<input type="text" value="" v-model="express_name" disabled placeholder="请选择快递" />
					<image :src="`${baseImg}/static/adminShop/moremore.png`" mode=""></image>
				</view>
				<view class="selectAddress"  v-if="mode!=3">
					<input type="text" value="" v-model="express_code" placeholder="输入或粘贴快递单号"
						placeholder-style="color:#A0A0A0;" />
				</view>
				<view class="selectType">
					发货类型
					<view class="btn">
						<view :class="[mode==1?'btnItem':'btnItem active']" @click="sendMode_order">按订单发货</view>
						<view :class="[mode==3?'btnItem':'btnItem active']" @click="sendMode_selfmention">到店自提</view>
						<view :class="[mode==2?'btnItem':'active btnItem']" @click="sendMode_package">分包裹发货</view>
					</view>
				</view>
			</view>

			<view class="nav">
				<view class="item" :class="{'active':!sendStatus}" @click="sendNot">
					未发货
					<view class="border" v-show="!sendStatus"></view>
				</view>
				<view class="item" :class="{'active':sendStatus}" @click="sendOk">
					已发货
					<view class="border" v-show="sendStatus"></view>
				</view>
			</view>

			<!-- 按包裹发货 -->
			<view class="packageBox">
				<view class="tit">
					发货商品
					<view class="num" v-if="!sendStatus && mode!=1">
						{{selectNum}}<span>/{{total}}</span>
					</view>
					<view class="num" v-else>
						{{total}}<span>/{{total}}</span>
					</view>
				</view>
				<!-- 未发货 -->
				<view class="shopList" v-if="!sendStatus">
					<view class="shopItem" v-for="(item,index) in shopList" :key="index">
						<image :src="item.main_imgurl" mode=""></image>
						<view class="shopInfo">
							<view class="text omit-1">{{item.product_title}}</view>
							<view class="shopSpec">
								<view class="spec">
									<span v-for="(item1,index1) in item.attr_params"
										:key="index1">{{item1.value}}</span>
								</view>
								<span>x{{item.num}}</span>
							</view>
						</view>
						<view class="select" v-if="mode==2 || mode==3" :class="{'active':item.checked}" @click="selectFn(index)">
							<u-icon size="24" name="checkmark"></u-icon>
						</view>
					</view>
				</view>
				<!-- 已发货 -->
				<view class="shopList" v-else>
					<view v-if="sendShopList.length">
						<view v-for="(item,index) in sendShopList" :key="index">
							<view class="sendOk">
								<span>{{item.send_name}}</span>
								<view class="express">
									{{item.express_name}} | {{item.courier_num}}
									<image :src="`${baseImg}/static/adminShop/copy.png`" mode=""></image>
								</view>
							</view>
							<view class="shopItem" v-for="(item1,index1) in item.list" :key="index1">
								<image :src="item1.main_imgurl" mode=""></image>
								<view class="shopInfo">
									<view class="text omit-1">{{item1.product_title}}</view>
									<view class="shopSpec">
										<view class="spec">
											<span v-for="(item2,index2) in item1.attr_params"
												:key="index2">{{item2.value}}</span>
										</view>
										<span>x{{item1.num}}</span>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else style="text-align: center;line-height: 100rpx;">
						暂无数据~
					</view>
				</view>
				<!-- 更多 -->
				<!-- <view class="moreShop" @click="openMore" v-if="shopList.length">
					<image :style="moreStatus?'transform: rotate(-90deg);':'transform: rotate(90deg);'" :src="`${baseImg}/static/adminShop/moremore.png`" mode=""></image>
				</view> -->
			</view>
			<u-picker mode="region" v-model="addressShow" @confirm="pickAddress" :area-code='areaCode'></u-picker>
		</view>
		<!-- 重制与发货按钮 -->
		<view class="resetBtn">
			<view class="left" @click="toReset">
				<view class="img">
					<image :src="`${baseImg}/static/adminShop/reset.png`" mode=""></image>
				</view>
				重置
			</view>
			<view class="right">
				<button type="default" :disabled="!showActive" :class="{'activeBtn':showActive}"
					@click="toSendNow">确认发货</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseImg: this.$static,
				moreStatus: false,
				order_id: null,
				shopList: [], //未发货商品列表
				sendShopList: [], //已发货商品列表
				total: 0,
				order_info: {},
				allArea: '',
				addressShow: false,
				provinceId: null,
				cityId: null,
				areaId: null,
				express_id: null, //物流id
				express_name: '', //物流名字
				express_code: '', //物流单号
				mode: 1, //发货方式 ，1-订单，2-包裹 3-到店自提
				sendStatus: false,
				order_status: 2, //2待发货，3已发货
			}
		},
		onLoad(options) {
			this.order_id = options.order_id
			this.getOrderDetail()
			this.getWaitShop()
		},
		computed: {
			selectNum() {
				let length = 0;
				this.shopList.map(item => {
					if (item.checked) {
						length++
					}
				})
				return length
			},

			showActive() {
				if (this.mode == 1) {
					if (this.express_id && this.express_name && this.express_code && this.shopList.length) {
						return true
					} else {
						return false
					}
				} else if(this.mode==2){
					let lstId = []
					this.shopList.map(item => {
						if (item.checked) {
							lstId.push(item.id)
						}
					})
					if (this.express_id && this.express_name && this.express_code && lstId.length) {
						return true
					} else {
						return false
					}
				}else{
					let lstId = []
					this.shopList.map(item => {
						if (item.checked) {
							lstId.push(item.id)
						}
					})
					return true
				}

			}

		},
		methods: {
			// 获取订单详情
			getOrderDetail() {
				let params = {
					store_id: this.$store.state.index.sid,
					order_id: this.order_id
				}
				this.$api.getOrderDetail(params).then(res => {
					console.log(res, '订单详情')
					if (res.code == 1) {
						this.order_info = res.data ? res.data : {},
							this.allArea = res.data.province + res.data.city + res.data.area

					}
				})
			},

			// 获取未发货商品
			getWaitShop() {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					order_id: this.order_id,
					order_status: '2',
					store_id: this.$store.state.index.sid
				}
				this.$api.getWaitSend(params).then(res => {
					if (res.code == 1) {
						this.total = res.data.list.length
						res.data.list.map(item => item.checked = false)
						this.shopList = res.data.list ? res.data.list : []
						uni.hideLoading()
						console.log(this.shopList, '未发货商品')
					}
				})
			},

			// 获取已发货商品
			getOkSend() {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					order_id: this.order_id,
					order_status: 3,
					store_id: this.$store.state.index.sid
				}
				this.$api.getWaitSend(params).then(res => {
					if (res.code == 1) {
						this.total = res.data.list.length
						if (!this.moreStatus) {
							this.sendShopList = res.data.list ? res.data.list.slice(0, 2) : []
						} else {
							this.sendShopList = res.data.list ? res.data.list : []
						}
						uni.hideLoading()
						console.log(this.sendShopList, '已发货商品')
					}else{
						uni.hideLoading()
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},

			// 选择发货商品
			selectFn(index) {
				if (this.shopList[index].checked) {
					this.shopList[index].checked = false
				} else {
					this.shopList[index].checked = true
				}
			},
			// 点击展开更多
			openMore() {
				if (this.moreStatus) {
					this.moreStatus = false
				} else {
					this.moreStatus = true
				}
			},

			// 选择物流公司
			selectExpress() {
				uni.navigateTo({
					url: 'express'
				})
			},

			// 按订单发货
			sendMode_order() {
				this.mode = 1
			},
			// 安包裹发货
			sendMode_package() {
				this.mode = 2
			},
			sendMode_selfmention() {
				this.mode = 3
			},

			// 未发货
			sendNot() {
				this.getWaitShop()
				this.sendStatus = false
			},
			// 已发货
			sendOk() {
				this.getOkSend()
				this.sendStatus = true
			},

			// 选择地址
			selectAD() {
				this.addressShow = true
			},
			// 地址弹框的确定
			pickAddress(e) {
				console.log(e, '地址弹框')
				this.provinceId = e.province.value + '0000'
				this.cityId = e.city.value + '00'
				this.areaId = e.area.value
				console.log(this.provinceId, this.cityId, this.areaId, '----')

				this.allArea = e.province.label + e.city.label + e.area.label
				// this.order_info.province = e.province.label
				// this.order_info.city = e.city.label
				// this.order_info.area = e.area.label
				// this.order_info.selectArea = e.province.label+e.city.label+e.area.label
			},
			// 重置按钮
			toReset() {
				this.express_id = null
				this.express_name = ''
				this.express_code = ''
				this.mode = 1
				this.sendStatus = false
				this.shopList.map(item => {
					item.checked = false
				})
				console.log(this.shopList, 'chongzhi')
			},
			// 确认发货按钮
			toSendNow() {
				let listId = []
				this.shopList.map(item => {
					if (this.mode == 1) {
						listId.push(item.id)
					} else {
						if (item.checked) {
							listId.push(item.id)
						}
					}
				})
				let id_lst = listId.join(',')
				if(!id_lst){
					uni.showToast({
						title: '请勾选发货的商品',
						icon: 'none'
					})
					return;
				}
				if(this.mode==3){
					this.express_code='';
					this.express_id='';
				}
				let params = {
					store_id: this.$store.state.index.sid,
					order_id: this.order_id,
					send_type: this.mode,
					courier_num: this.express_code,
					express_id: this.express_id,
					id_lst
				}
				console.log(params, '发货数据')
				this.$api.to_send(params).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '发货成功',
							icon: 'success'
						})
						this.toReset()
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, )
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.deliverSet {
		.content {
			// 收货人信息
			margin-bottom: 160rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.userInfo {
				margin: 24rpx auto;
				font: 400 26rpx/40rpx PingFang SC;
				color: #0A0605;
				padding-bottom: 8rpx;
				width: 702rpx;
				border-radius: 16rpx;
				background-color: #fff;

				image {
					width: 104rpx;
					height: 48rpx;
				}

				.info {
					padding: 40rpx 0 32rpx 28rpx;

					span {
						margin-left: 260rpx;
					}
				}

				.selectAddress {
					padding: 32rpx 24rpx 32rpx 28rpx;
					border-top: 2rpx solid #F5F5F5;
					display: flex;
					align-items: center;
					justify-content: space-between;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			// 快递公司
			.selectExpress {
				margin: 24rpx auto;
				font: 400 26rpx/40rpx PingFang SC;
				color: #0A0605;
				padding-bottom: 8rpx;
				width: 702rpx;
				border-radius: 16rpx;
				background-color: #fff;

				.selectAddress {
					padding: 32rpx 24rpx 32rpx 28rpx;
					border-bottom: 2rpx solid #F5F5F5;
					display: flex;
					align-items: center;
					justify-content: space-between;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.selectType {
					padding: 32rpx 24rpx 32rpx 28rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btn {
						display: flex;
						align-items: center;

						.btnItem {
							width: 160rpx;
							height: 56rpx;
							text-align: center;
							color: #E3BA71;
							font: 400 22rpx/56rpx PingFang SC;
							margin-left: 16rpx;
							border: 2rpx solid #E3BA71;
							border-radius: 32rpx;
						}

						.active {
							color: #A0A0A0;
							border-color: #A0A0A0;
						}
					}
				}
			}

			// nav
			.nav {
				width: 100%;
				display: flex;
				justify-content: space-around;
				margin: 40rpx 0 24rpx 0;

				.item {
					position: relative;
					font: 400 30rpx/30rpx PingFang SC;
					color: #A0A0A0;

					.border {
						position: absolute;
						left: -2rpx;
						bottom: 2rpx;
						background: linear-gradient(90deg, #E3BA71 0%, rgba(227, 186, 113, 0) 100%);
						width: 92rpx;
						height: 12rpx;
						z-index: -1;
					}
				}

				.active {
					color: #292A2B;
				}
			}

			// 按包裹发货
			.packageBox {
				margin: 24rpx auto;
				font: 400 26rpx/40rpx PingFang SC;
				color: #0A0605;
				padding-bottom: 8rpx;
				width: 702rpx;
				border-radius: 16rpx;
				background-color: #fff;

				.tit {
					display: flex;
					padding: 40rpx 24rpx 40rpx 28rpx;
					justify-content: space-between;

					span {
						color: #A0A0A0;
					}
				}

				.shopList {
					padding: 0 24rpx;

					// 已发货时的包裹
					.sendOk {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 40rpx 0 24rpx 0rpx;

						span {
							padding: 0 8rpx;
							height: 36rpx;
							border-radius: 4rpx;
							background-color: #E7AD14;
							color: #fff;
							font: 400 22rpx/36rpx PingFang SC;
						}

						.express {
							display: flex;
							align-items: center;
							font: 400 22rpx/20rpx PingFang SC;
							color: #A0A0A0;

							image {
								width: 32rpx;
								height: 32rpx;
								margin-left: 16rpx;
							}
						}
					}

					.shopItem {
						margin-bottom: 12rpx;
						position: relative;
						display: flex;
						align-items: center;
						width: 654rpx;
						height: 120rpx;
						border: 2rpx solid #f4f4f4;
						border-radius: 8rpx;
						padding: 16rpx 28rpx 16rpx 16rpx;

						image {
							margin-right: 16rpx;
							width: 88rpx;
							height: 88rpx;
							border-radius: 8rpx;
						}

						.shopInfo {
							width: 506rpx;
							font: 400 22rpx/28rpx PingFang SC;
							color: #0A0605;

							.text {
								width: 474rpx;
							}

							.shopSpec {
								margin-top: 24rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								font: 400 22rpx/20rpx PingFang SC;

								.spec {
									span {
										color: #A0A0A0;
									}
								}

								span {
									color: #E3BA71;
								}
							}
						}

						.select {
							position: absolute;
							right: 0;
							top: 0;
							color: #fff;
							text-align: center;
							display: flex;
							justify-content: center;
							width: 32rpx;
							height: 32rpx;
							border-radius: 0px 8rpx 0px 8rpx;
							background-color: #D8D8D8;
						}

						.active {
							background-color: #E3BA71;
						}
					}
				}

				// 更多
				.moreShop {
					padding: 8rpx 0 20rpx 0;

					image {
						width: 40rpx;
						height: 40rpx;
						margin: 0 auto;
						// transform: rotate(90deg);
					}
				}
			}
		}

		// 重置与发货按钮
		.resetBtn {
			background-color: #fff;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 0 24rpx 0 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: calc(120rpx+ constant(safe-area-inset-bottom));
			height: calc(120rpx + env(safe-area-inset-bottom));
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.left {
				font: 400 18rpx/20rpx PingFang SC;
				color: #A0A0A0;
				margin: 20rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;

				.img {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					background-color: #F5F5F5;
					display: flex;
					align-items: center;
					flex-direction: column;
					margin-bottom: 6rpx;
					justify-content: center;

					image {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}

			.right {
				margin: 20rpx 0;

				button {
					font: 500 32rpx/80rpx PingFang SC;
					width: 606rpx;
					height: 80rpx;
					background-color: #D8D8D8;
					color: #fff;
					border-radius: 46rpx;
				}

				.activeBtn {
					background: linear-gradient(86deg, #DBA954 0%, #EABA6A 100%);
					box-shadow: 0px 6rpx 12rpx rgba(219, 169, 84, 0.3);
				}
			}
		}
	}
</style>
